 // 单位数补0
 function change(t){
 	if(t<10){
 	 return "0"+t;
 	}else{
 	 return t;
 	}
 }
 // 当前时间
function formDate(){
	setInterval(function(){
		var d=new Date();
		var year=d.getFullYear();
		var month= change(d.getMonth()+1);
		var day= change(d.getDate());
		var hour= change(d.getHours());
		var minute= change(d.getMinutes());
		var second= change(d.getSeconds());
		var time=year+'-'+month+'-'+day+' '+hour+':'+minute+':'+second;
		var weekarr = ["日", "一", "二", "三", "四", "五", "六"]; 
		var key=d.getDay()
		document.getElementById('riqi').innerHTML=year+' 年 '+month+' 月 '+day+' 日  星期'+weekarr[key]
		document.getElementById('shijian').innerHTML=hour+':'+minute+':'+second
	},1000)			
}

// 全屏
function full(){
	var docElm = document.documentElement;
	//W3C 
	if (docElm.requestFullscreen) { 
		docElm.requestFullscreen(); 
	}
	//FireFox 
	else if (docElm.mozRequestFullScreen) { 
		docElm.mozRequestFullScreen(); 
	}
	//Chrome等 
	else if (docElm.webkitRequestFullScreen) { 
		docElm.webkitRequestFullScreen(); 
	}
	//IE11
	else if (elem.msRequestFullscreen) {
	  elem.msRequestFullscreen();
	}
	
	if (document.exitFullscreen) { 
		document.exitFullscreen(); 
	} 
	else if (document.mozCancelFullScreen) { 
		document.mozCancelFullScreen(); 
	} 
	else if (document.webkitCancelFullScreen) { 
		document.webkitCancelFullScreen(); 
	}
	else if (document.msExitFullscreen) {
		  document.msExitFullscreen();
	}
	
}

// 向上滚动函数
function topScroll(enType,steep) { //滚动效果函数
  var noticeListH = $(enType+" li").height(), //获取滚动的li的高度
	noticeH = $(enType).parent().height(), //获取展示区域的高度
	noticeHListNum = Math.ceil(noticeH / noticeListH), //获取展示区域一共可以展示多少条数据,这里是因为布局的原因才*2的如果一行只有一个不需要*2
	listNum = $(enType+" li").length;
  if(listNum > noticeHListNum) {
	$(enType).animate({
	  'marginTop':-noticeListH+'px'
	},steep,'swing',function() { //当动画结束直接回调下面的函数
	  $(enType+' li:first').appendTo($(enType));
	  $(enType).css({'marginTop':'0'+'px'});
	});
  }
}
// 向左滚动函数
function leftScroll(enType,steep) { //滚动效果函数
  var noticeListH = $(enType+" span").width(), //获取滚动的li的高度
	noticeH = $(enType).parent().width(), //获取展示区域的高度
	noticeHListNum = Math.ceil(noticeH / noticeListH), //获取展示区域一共可以展示多少条数据,这里是因为布局的原因才*2的如果一行只有一个不需要*2
	listNum = $(enType+" span").length;
  if(listNum > noticeHListNum-1) {
	$(enType).animate({
	  'marginLeft':-noticeListH+'px'
	},steep,'swing',function() { //当动画结束直接回调下面的函数
	  $(enType+' span:first').appendTo($(enType));
	  $(enType).css({'marginLeft':'0'+'px'});
	});
  }
}
// 生产线统计
function tongji1(tongji1){
	$('.tongji1').html('')
	tongji1.forEach(function(item){
		var str=''
		item.forEach(function(val,key){
			str+=`<li>
				<div class="top top${key+1}">
					<p class="p1">${val.title}</p>
					<p class="p2 ziti">${val.num}</p>
					<p class="process col${key+1}"><span style="width:${val.process}"></span></p>
				</div>
				<div class="tit cor${key+1}">${val.tit}</div>
			</li>`
		})
		$('.tongji1').append(`
			<li style="">
				<ul class="clearfix list">
				${str}
				</ul>
			</li>
		`)
	})
	// 左侧轮播1
	
	$( "#banner" ).HappyImage({
		effect: "slide",
		autoplay:5000
	});
}
// 生产线合格率
function tongji2(tongji2){
	$('.tongji2').html('')
	tongji2.forEach(function(item,k){
		var str=''
		item.forEach(function(val,key){
			str+=`<li>
				<div class="circleChart${k+1}-${key+1}"></div>
				<div class="tit cor${key+1}">${val.tit}</div>
			</li>`
		})
		$('.tongji2').append(`
			<li style="">
				<ul class="clearfix list">
				${str}
				</ul>
			</li>
		`)
		item.forEach(function(val1,key1){
			$(".circleChart"+(k+1)+"-"+(key1+1)).circleChart({
				value: val1.process,
				color: val1.col,
				backgroundColor: val1.col1,
				text:  val1.process+"%",
				startAngle:175,
				textSize:31,
				textFamily:"UNIDREAMLED"
			});
		})
	})
	//左侧轮播2
	
	$( "#banner2" ).HappyImage({
		effect: "slide",
		autoplay:5000
	});
}
// 设备生产效率统计
function tongji3(tongji3){
	$('.tongji3').html('')
	tongji3.forEach(function(item,k){
		var str=''
		item.forEach(function(val,key){
			str+=`<li>
				<div class="circle${k+1}-${key+1}"></div>
				<div class="tit cor${key+1}">${val.tit}</div>
			</li>`
		})
		$('.tongji3').append(`
			<li style="">
				<ul class="clearfix list">
				${str}
				</ul>
			</li>
		`)
		item.forEach(function(val1,key1){
			$(".circle"+(k+1)+"-"+(key1+1)).circleChart({
				value: val1.process/4,
				color: val1.col,
				backgroundColor: "rgba(0,0,0,0)",
				text:  val1.process,
				startAngle:175,
				textSize:31,
				textFamily:"UNIDREAMLED"
			});
		})
	})
	// 左侧轮播3
	
	$( "#banner3" ).HappyImage({
		effect: "slide",
		autoplay:5000
	});
}
// 中间表格1(今日任务信息)
function table1(table1){
	$('.table1 .th').html('')
	table1['title'].forEach(function(item){
		$('.table1 .th').append(`
			<span class="s1">${item}</span>
		`)
	})
	$('.scroll4').html('')
	table1['data'].forEach(function(item1,key1){
		$('.scroll4').append(`
			<li class="tr ${key1%2==0? 'item1':'item2'}">
				<span class="bar1" style="width:${item1[8]}"></span>
				<span class="s1">${item1[0]}</span>
				<span class="s2">${item1[1]}</span>
				<span class="s3">${item1[2]}</span>
				<span class="s4">${item1[3]}</span>
				<span class="s5">${item1[4]}</span>
				<span class="s4">${item1[5]}</span>
				<span class="s5">${item1[6]}</span>
				<span class="s5">${item1[7]}</span>
			</li>
		`)
	})
	// 中间滚动1
	var timer44 = setInterval(function() {
		topScroll(".scroll4",2000);
	},3000);
	$('.scroll4 li').on('mouseover',function(){
		clearInterval(timer44)
	})
	$('.scroll4 li').on('mouseout',function(){
		timer44 = setInterval(function() {
			topScroll(".scroll4",1000);
		},3000);
	})
}
// 中间表格2(今日新增合同（任务）信息)
function table2(table2){
	$('.table2 .th').html('')
	table2['title'].forEach(function(item){
		$('.table2 .th').append(`
			<span class="s1">${item}</span>
		`)
	})
	$('.scroll1').html('')
	table2['data'].forEach(function(item1,key1){
		$('.scroll1').append(`
			<li class="tr ${key1%2==0? 'item1':'item2'}">
				<span class="s1">${item1[0]}</span>
				<span class="s2">${item1[1]}</span>
				<span class="s3">${item1[2]}</span>
				<span class="s4">${item1[3]}</span>
				<span class="s5">${item1[4]}</span>
				<span class="s4">${item1[5]}</span>
				<span class="s5">${item1[6]}</span>
			</li>
		`)
	})
	// 中间滚动2
	var timer01 = setInterval(function() {
		topScroll(".scroll1",1000);
	},3000);
	$('.scroll1 li').on('mouseover',function(){
		clearInterval(timer01)
	})
	$('.scroll1 li').on('mouseout',function(){
		timer01 = setInterval(function() {
			topScroll(".scroll1",1000);
		},3000);
	})
}
// 右侧表格1(原材料库存预警)
function table3(table3){
	$('.table3 .th').html('')
	table3['title'].forEach(function(item){
		$('.table3 .th').append(`
			<span class="s1">${item}</span>
		`)
	})
	$('.scroll2').html('')
	table3['data'].forEach(function(item1,key1){
		$('.scroll2').append(`
			<li class="tr ${key1%2==0? 'item1':'item2'}">
				<span class="s1">${item1[0]}</span>
				<span class="s2">${item1[1]}</span>
				<span class="s3">${item1[2]}</span>
				<span class="s4">${item1[3]}</span>
				<span class="s5">${item1[4]}</span>
			</li>
		`)
	})
	// 右侧滚动1
	var timer22 = setInterval(function() {
		topScroll(".scroll2",1000);
	},3000);
	$('.scroll2 li').on('mouseover',function(){
		clearInterval(timer22)
	})
	$('.scroll2 li').on('mouseout',function(){
		timer22 = setInterval(function() {
			topScroll(".scroll2",1000);
		},3000);
	})
}
// 右侧表格2(原材料库存统计)
function table4(table4){
	$('.table4 .left').html('')
	table4['title'].forEach(function(item){
		$('.table4 .left').append(`
			<p>${item}</p>
		`)
	})
	$('.scroll3 .lis1').html('')
	$('.scroll3 .lis2').html('')
	$('.scroll3 .lis3').html('')
	table4['data'].forEach(function(item1,key1){
		$('.scroll3 .lis1').append(`
			<span class="s2">${item1[0]}</span>
		`)
		$('.scroll3 .lis2').append(`
			<span class="s2">${item1[1]}</span>
		`)
		$('.scroll3 .lis3').append(`
			<span class="s2">${item1[2]}</span>
		`)
	})
	// 右侧滚动2
	var timer33=setInterval(function() {
		for(var i=1;i<4;i++){
			leftScroll(".scroll3 .lis"+i,1000);
		}
	},3000);
	$('.scroll3 li').on('mouseover',function(){
		clearInterval(timer33)
	})
	$('.scroll3 li').on('mouseout',function(){
		 timer33=setInterval(function() {
			for(var i=1;i<4;i++){
				leftScroll(".scroll3 .lis"+i,1000);
			}
		},3000);
	})
}

// 左上环形图
var myChart1 = echarts.init(document.getElementById('echart1'));
function ech1(res){
$('.total1').text(res.total)
option1 = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
	title: {
		text: res.title,
		y:'bottom',
		x:'15%',
		textStyle: {
			fontSize:14,
			fontWeight:'normal',
			color: ['#5fccff']
		}
	},
    legend: {
        orient: 'vertical',
		top:"28%",
        right: "15%",
		itemWidth:16,
		itemHeight:8,
        data: res.names,
		textStyle: {
			color:res.color,
			fontSize: 14,
		}
    },
	color:res.color,
    series: [
        {
            name: res.title,
            type: 'pie',
            radius: ['50%', '70%'],
			center:['35%','50%'],
			startAngle:270,
            avoidLabelOverlap: false,
            labelLine: {
            	normal: {
            		length: 15,
            		length2: 40
            	}	 
            },
            label: {
            	normal: {
            		formatter: '{c}\n',
            		fontSize:14,
            		padding: [0, -40],
            	}
            },
            data: res.data,
            itemStyle:{
                borderWidth:3,
                borderColor:"#0c1948"
            }
        }
    ]
};
myChart1.setOption(option1);
	
}
// 右上柱状图
var myChart2 = echarts.init(document.getElementById('echart2'));
function ech2(res,g,eg){
option2 = {
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
		top:'10%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
	dataZoom: [{
		type: 'inside',
		start: g,
		end: eg
	},],
    xAxis: [
        {
            type: 'category',
            data: res.names,
			axisLabel: {
				textStyle:{
					color:'#21c6ed',  //坐标的字体颜色
				}
			},
			splitLine:{
				 lineStyle: {
					 type: 'solid',
					 color: '#25315c'
				 }
			 },
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
			axisLabel: {
				textStyle:{
					color:'#21c6ed',  //坐标的字体颜色
				},
				formatter: '{value}'
			},
			splitLine:{
				 show: true,
				 lineStyle: {
					 type: 'solid',
					 color: '#25315c'
				 }
			 }
        }
    ],
    series: [
        {
            name: res.title,
            type: 'bar',
            barWidth: '40%',
            data: res.data,
			label: {
				normal: {
					show: true,
					position: 'top',
					color: function(params){
						var colorItem = res['cols'][params.dataIndex];
						return new echarts.graphic.LinearGradient(0,0,0,1,[
							{
								offset:0,
								color: colorItem[0]
							},
							{
								offset:1,
								color: colorItem[1]
							}
						],false);
					}
				}
			},
			itemStyle:{
				normal:{
					//柱体的颜色
					//右，下，左，上（1，0，0，0）表示从正右开始向左渐变
					color: function(params){
						var colorItem = res['cols'][params.dataIndex];
						return new echarts.graphic.LinearGradient(0,0,0,1,[
							{
								offset:0,
								color: colorItem[0]
							},
							{
								offset:1,
								color: colorItem[1]
							}
						],false);
					}
				}
					
			},
        }
		
    ]
};
myChart2.setOption(option2);	
}
// 右二柱状图
var myChart3 = echarts.init(document.getElementById('echart3'));
function ech3(res,g,eg){
var series=[];
var cols=[]
var datay=[]
 for(var i in res.leg){
	cols.push(res['leg'][i]['col'])
	datay.push(i)
	series.push(
	{
	    name: i,
	    type: 'bar',
	    barWidth: '20%',
		barCateGoryGap:20,
	    data:res['leg'][i]['data'],
		label: {
			normal: {
				show: true,
				position: 'top',
				color:res['leg'][i]['col'],
				fontSize:12
			}
		},
		itemStyle:{
			normal:{
				//柱体的颜色
				//右，下，左，上（1，0，0，0）表示从正右开始向左渐变
				color: res['leg'][i]['acol']
			}
				
		},
	}
	)
}
option3 = {
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    grid: {
		top:'22%',
        left: '3%',
        right: '4%',
        bottom: '0%',
        containLabel: true
    },
	dataZoom: [{
		type: 'inside',
		start: g,
		end:eg
	},],
	legend: {
		top:"0%",
		itemWidth:14,
		itemHeight:8,
	    data: datay,
		textStyle: {
			color:cols,
			fontSize: 14,
		}
	},
    xAxis: [
        {
            type: 'category',
            data: res.names,
			axisLabel: {
				textStyle:{
					color:'#21c6ed',  //坐标的字体颜色
				}
			},
			splitLine:{
				 lineStyle: {
					 type: 'solid',
					 color: '#25315c'
				 }
			 },
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
			axisLabel: {
				textStyle:{
					color:'#21c6ed',  //坐标的字体颜色
				},
				formatter: '{value}'
			},
			splitLine:{
				 show: true,
				 lineStyle: {
					 type: 'solid',
					 color: '#25315c'
				 }
			 }
        }
    ],
    series: series
};
myChart3.setOption(option3,true);
myChart3.setOption(option3);
}

// 中间折线图
var myChart4 = echarts.init(document.getElementById('echart4'));
function ech4(res){
	var series=[];
	 for(var i in res.data){
		series.push(
		{
		    name: i,
		    type: 'line',
		    smooth: true,
			animation:true,
			symbol: 'circle',
			showSymbol: false,
			lineStyle:{
				color:res.data[i]['col'],
				normal:{
					shadowBlur: 10,
					shadowOffsetX: 0,
					shadowColor: 'rgba(255, 255, 255, 0.5)'
				}
			},
		    areaStyle: {
		        color: res.data[i]['acol']
		    },
		    data:res.data[i]['shuju']
		}
		)
	}
	option4 = {
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'shadow',
	            label: {
	                backgroundColor: '#6a7985'
	            }
	        }
	    },
		dataZoom: [{
			type: 'inside',
			start: 0,
			end: 100
		},],
		color:res.col,
	    legend: {
			top:"3%",
	        data: res.names,
			formatter: (params) => {  //格式化数据的函数
				for (let a = 0; a < option4.series.length; a++) {
					if (option4.series[a].name == params) {
						 var total=0
						 for(var num of option4.series[a].data){
							total+= num
						 }
						  return params+": "+total
					}
				}
			}
	    },
	    grid: {
	        left: '3%',
	        right: '4%',
	        bottom: '3%',
	        containLabel: true
	    },
	    xAxis: [
	        {
	            type: 'category',
	            boundaryGap: false,
				axisLabel: {
					textStyle:{
						color:'#5fccff',  //坐标的字体颜色
					},
					formatter: '{value}'
				},
				splitLine:{
					 lineStyle: {
						 type: 'solid',
						 color: '#25315c'
					 }
				 },
	            data: res.datax
	        }
	    ],
	    yAxis: [
	        {
	            type: 'value',
				axisLabel: {
					textStyle:{
						color:'#5fccff',  //坐标的字体颜色
					}
				},
				splitLine:{
					 show: true,
					 lineStyle: {
						 type: 'solid',
						 color: '#25315c'
					}
				},
	        }
	    ],
	    series: series
	};
	myChart4.setOption(option4,true);
	myChart4.setOption(option4);
	lub(myChart4,data1)	
}
// tooltip自动轮播
var timeId2=null
var tab2=1
function lub(myChart4,data1){
	var currentIndex = -1;
	var dataLen = data1.length;
	timeId2 && clearInterval(timeId2);
	timeId2=setInterval(function () {
		// 取消之前高亮的图形
		myChart4.dispatchAction({
		  type: 'downplay',
		  seriesIndex: 0,
		  dataIndex: currentIndex
		});
		currentIndex = (currentIndex + 1) % dataLen;
		//console.log(app.currentIndex);
		// 高亮当前图形
		myChart4.dispatchAction({
		  type: 'highlight',
		  seriesIndex: 0,
		  dataIndex: currentIndex,
		});
		// 显示 tooltip
		myChart4.dispatchAction({
		  type: 'showTip',
		  seriesIndex: 0,
		  dataIndex: currentIndex
		});
		if(currentIndex+1==dataLen){
			currentIndex=-1
			$('.nav1 span').eq(tab2).siblings().removeClass('on')
			$('.nav1 span').eq(tab2).addClass('on')
			if(tab2==1){
				// 年总数
				tab2=0
				ech4(edata41)
			}else{
				ech4(edata4)
				tab2++
			}
			
		}
	}, 2000);
	myChart4.on('mouseover', function () {
		clearInterval(timeId2);
	});
	
	myChart4.on('mouseout', function () {
		timeId2 && clearInterval(timeId2);
		timeId2 = setInterval(function () {
			myChart4.dispatchAction({
				type: 'downplay',
				seriesIndex: 0,
			});
			myChart4.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: currentIndex
			});
			myChart4.dispatchAction({
				type: 'showTip',
				seriesIndex: 0,
				dataIndex: currentIndex
			});
			currentIndex = (currentIndex + 1) % dataLen;
			if(currentIndex+1==dataLen){
				currentIndex=-1
				tab2++
				$('.nav1 span').eq(tab2).siblings().removeClass('on')
				$('.nav1 span').eq(tab2).addClass('on')
				if(tab2==1){
					// 年总数
					clearInterval(timeId2)
					ech4(edata41)
				}else{
					clearInterval(timeId2)
					ech4(edata4)
				}
				if(tab2==1){
					tab2=0
				}
			}
		}, 2000);
	});
}
